<template>
  <!-- 筹备期 -->
  <div class="afterHome">
    <el-row :gutter="20">
      <el-col style="height: 250px;overflow: hidden;" :span="fundBaseInfo.fundPhaseList && fundBaseInfo.fundPhaseList.length > 0 ? 12 : 24">
        <div class="box" style="height: 100%;">
          <div class="area-header">
            <span class="area-header-title">{{ $t('关键信息') }}</span>
          </div>
          <div class="text item">
            <table v-loading="loading" class="dataTable">
              <tr>
                <td class="tit">{{ $t('基金名称') }}</td>
                <td><span v-if="fundBaseInfo.fundName">{{ fundBaseInfo.fundName }}</span></td>
                <td class="tit">{{ $t('基金管理人') }}</td>
                <td>{{ fundBaseInfo.fundBaseFund.managerName }}</td>
              </tr>
              <tr>
                <td class="tit">{{ $t('目标募集规模') }}{{ $t('金额单位') }}</td>
                <td>{{ moneyFormat(fundBaseInfo.fundBaseFund.targetAmount, 'w') }}</td>
                <td class="tit">{{ $t('基金状态') }}</td>
                <td>{{ fundStatusFormat() }}</td>
              </tr>
              <tr>
                <td class="tit">{{ $t('基金类型') }}</td>
                <td>{{ fundTypeFormat() }}</td>
              </tr>
              <tr>
                <td class="tit">{{ $t('基金成立日') }}</td>
                <td>{{ parseTime(fundBaseInfo.foundationDate) }}</td>
                <td class="tit">{{ $t('基金投资方式') }}</td>
                <td>{{ investmentWayFormat() }}</td>
              </tr>
              <tr>
                <td class="tit">{{ $t('注册地-省') }}</td>
                <td>{{ fundBaseInfo.provinceRegisteredName }}</td>
                <td class="tit">{{ $t('注册地-市') }}</td>
                <td>{{ fundBaseInfo.cityRegisteredName }}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col v-if="fundBaseInfo.fundPhaseList && fundBaseInfo.fundPhaseList.length > 0" style="height: 250px;overflow: hidden;" :span="12">
        <div class="box" style="height: 100%;">
          <div class="area-header">
            <span class="area-header-title">{{ $t('期限') }}</span>
          </div>
          <div class="text item">
            <table v-loading="loading" class="dataTable">
              <tr v-for="(item, index) in fundBaseInfo.fundPhaseList" :key="index">
                <td class="tit">{{ $t(item.phaseDictLabel) }}</td>
                <td>{{ item.year }}</td>
                <td class="tit">{{ $t('起始日期') }}</td>
                <td>{{ parseTime(item.startDate) }}</td>
                <td class="tit">{{ $t('结束日期') }}</td>
                <td>{{ parseTime(item.endDate) }}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="mt20">
        <div class="box">
          <div class="area-header">
            <span class="area-header-title">{{ $t('基金设立审核要点') }}</span>
          </div>
          <div class="text item" style="height:400px;">
            <pieChart v-if="chartData.datas.length > 0" :chart-data="chartData" height="100%" @xData="handleTooltipClick" />
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" class="mt20">
        <div v-loading="fundKeyPointLoading" class="box">
          <div class="area-header">
            <span class="area-header-title">{{ $t(implementation) }}{{ $t('清单') }}</span>
          </div>
          <div class="text item">
            <el-table :data="keyPointList.fundKeyPointList" border style="width: 100%" height="400">
              <el-table-column prop="fundMainPointsTemplate.mainPointsName" :label="$t('设立要点内容')" />
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import { list, init } from '@/api/fund/mainpointstemplate/fundMainPointsTemplateCount'
import { getFundBase } from '@/api/fund/fundBase'
import pieChart from '@/views/chart/pieChart'
import { pointCount } from '@/api/fund/mainpointstemplate/fundMainPointsTemplateCount'
export default {
  components: {
    pieChart
  },
  data() {
    return {
      // 基金信息
      fundBaseInfo: {},
      loading: true,
      implementation: '未落实',
      fundKeyPointLoading: false,
      keyPointList: [],
      investmentWayOption: [],
      managementOption: [],
      fundTypeOption: [],
      fundStatusOption: [],
      chartData: {
        radius: [0, '50%'],
        datas: []
      }
    }
  },
  created() {
    this.getDicts('fund_nvestment_way').then(response => {
      this.investmentWayOption = response.data
    })
    this.getDicts('fund_management_type').then(response => {
      this.managementOption = response.data
    })
    this.getDicts('fund_type').then(response => {
      this.fundTypeOption = response.data
    })
    this.getDicts('fund_status').then(response => {
      this.fundStatusOption = response.data
    })
  },
  mounted() {
    this.init()
    this.handleTooltipClick('未落实')
  },
  methods: {
    init() {
      getFundBase(this.$route.query.id).then(response => {
        if (response.code === 200) {
          this.fundBaseInfo = response.data
          this.loading = false
        } else {
          this.loading = false
        }
      })
      pointCount(this.$route.query.id).then(response => {
        if (response.code === 200) {
          var row = response.data
          this.chartData.datas = [
            { value: row.yes || 0, name: this.$t('已落实') },
            { value: row.no || 0, name: this.$t('未落实') },
            { value: row.inconformity || 0, name: this.$t('不符合') }
          ]
        }
      })
    },
    handleTooltipClick(data) {
      var val = data.name
      this.fundKeyPointLoading = true
      this.implementation = val
      var dictValve
      switch (val) {
        case '未落实':
          dictValve = 'N'
          break
        case '已落实':
          dictValve = 'Y'
          break
        case '不符合':
          dictValve = 'BFH'
          break
        case '未选择':
          dictValve = null
          break
      }
      const params = {
        fundId: this.$route.query.id,
        implementation: dictValve
      }
      list(params).then(response => {
        if (response.data.fundKeyPointList.length === 0) {
          if (val === '未选择') {
            init().then(response => {
              this.keyPointList = response.data
              this.fundKeyPointLoading = false
            })
          } else {
            this.keyPointList.fundKeyPointList = undefined
            this.fundKeyPointLoading = false
          }
        } else {
          this.keyPointList = response.data
          this.fundKeyPointLoading = false
        }
      })
    },
    // 基金类型 字典翻译
    fundTypeFormat() {
      return this.selectDictLabel(this.fundTypeOption, this.fundBaseInfo.fundBaseFund.fundType)
    },
    // 基金管理类型
    managementFormat() {
      return this.selectDictLabel(this.managementOption, this.fundBaseInfo.fundBaseFund.managementType)
    },
    // 基金投资类型
    investmentWayFormat() {
      return this.selectDictLabel(this.investmentWayOption, this.fundBaseInfo.fundBaseFund.investmentMode)
    },
    // 基金状态
    fundStatusFormat() {
      return this.selectDictLabel(this.fundStatusOption, this.fundBaseInfo.fundBaseFund.fundStatus)
    }
  }
}
</script>

